@charset "utf-8";

@import "common/common";
@import "common/reset";

.web{
    height: 100%;
    header{
        position: absolute;
        padding: 0;
        .my_top{           
            margin-top: r(48px);
            margin-left: r(24px); 
            margin-right: r(18px); 
            height: r(57px);
            line-height: r(57px);; 
            text-align: center;
            a{
                float: left;
                width: r(123px);
                height: r(52px);
                border: 1px solid $color;
                border-radius: r(20px);text-align: center;
                line-height: r(57px);
            }
            p{
                display: inline-block;
                margin: 0 auto;
                width:50px;
                font-size: r(26px);
            }
            i{
                float: right;
                font-size: r(65px);
                color: $color;
            }      
        } 
        .load_info{
            height: r(169px);
            margin: 0 r(23px); 
            margin-top: r(20px); 
            overflow: hidden;         
            .head_portrait{
                height: r(169px);
                width: r(169px);
                border-radius: 50%;
                display: inline-block;
                overflow: hidden;
                img{
                    width: 100%;                    
                }
            }
            .wenzi{
                margin-top:r(65px);               
                margin-left: r(10px);
                display: inline-block;
                height: r(92px);
                vertical-align: top;
                p{
                    font-size: r(30px);
                    &:nth-child(2){                       
                        margin-top: r(20px);
                        font-size: r(26px);
                        color:#9d9d9d;
                    }
                }                            
            }
            .left_jiantou{
                display: inline-block;
                float: right;
                font-size: r(100px);
                margin-top: r(30px);
            }
        }  
    }
    main{
        width: 100%;
        overflow:scroll;
        top: r(320px);
        bottom: r(120px);
        position:absolute;
        padding: 0 r(22px);
        .my_column{
            display: flex;
            margin-top: r(56px);
            .img_bcg{
                flex: 1;
                height: r(150px);
                background: #b2e0a0;
                margin-right:r(59px); 
                div{
                    height: r(82px);
                    width: r(78px);
                    margin: r(16px) 0;
                    img{
                        width: 100%;
                    }
                }
                p{
                    font-size: r(26px);
                }
            }
            .img_bcb{
                flex:1;
                height: r(150px);
                margin-right:r(59px);
                background: #a0dce0;
                // margin: 0 r(30px);
                div{
                    margin: r(16px) 0;
                    height: r(84px);
                    width: r(80px);
                    img{
                        width: 100%;
                    }
                }
                p{
                    font-size: r(26px);
                }
            }
            .img_bcr{
                flex: 1;
                height: r(150px);
                background: #e0b7a0;
                div{
                    margin: r(16px) 0;
                    height: r(81px);
                    width: r(124px);
                    img{
                        width: 100%; 
                    }
                }
                p{
                    font-size: r(26px);
                }   
            }
        }
        .set_list{
            height: r(610px);
            margin-top: r(35px);
            ul{
                li{
                    height: r(79px);
                    line-height: r(79px);
                    margin-bottom: r(27px);
                    span{
                        height: r(79px);
                        display: inline-block;
                        width: r(120px);
                    }
                    img{
                        height: 100%;
                    }
                    p{
                        display: inline-block;
                        vertical-align: top;
                        font-size: r(26px);
                        width: r(500px);
                        span{
                            float: right;
                            width: r(90px); 
                            img{
                                height: r(26px);
                                margin-left: r(10px);
                            } 
                        }
                    }
                }
            } 
        }
        .page_quit{
            height: r(85px);
            margin-top: r(36px);
            text-align: center;
            a{
                text-align: center;
                line-height: r(75px);
                border-radius: 30px;
                display: inline-block;
                background: $color;
                width: r(145px);
                height: r(75px);
                margin: auto;
                &:first-child{
                    margin-right: r(275px);
                }
            }
        }
    }
    footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0px;
        padding-top: 5.5px;
        background-color: white;
        &::after{
            content: '';
            width: 100%;
            border-top: 1px solid rgba(7,17,27,.1);
            position: absolute;
            top: 0;
            transform: scaleY(1.5);
        }
        ul{
            display: flex;
            li{ 
                flex: 1;
                text-align: center;
                a{
                    display: block;
                    div{
                        font-size: r(26px);
                    }     
                    color: $color;      
                    i{
                        font-size: r(70px);
                    }                
                }
            }
        }
    }    
}
